<template>
  <page>
    <template v-slot:header>
      <h2>
        <i class="icon iconfont">&#xe611;</i>
        <span>{{ $t("configure.suse_migrate_tool") }}</span>
      </h2>
    </template>
    <template v-slot:global-button>
      <el-button class="kylin-button">{{
        $t("excel_template_download")
      }}</el-button>
    </template>
    <template v-slot:content>
      <p>{{ $t("configure.suse_migrate_tool_table_description") }}</p>
      <ky-table :getData="getBatchList" ref="table" :search_data="search_data">
        <template v-slot:table-action>
          <el-upload
            :show-file-list="false"
            class="upload-demo"
            action="https://jsonplaceholder.typicode.com/posts/"
            :limit="1"
            accept="xls"
            :file-list="fileList"
            :on-success="handleSuccess"
            :on-error="handleError"
          >
            <el-button class="kylin-item-button">
              {{ $t("configure.upload_excel") }}
            </el-button>
          </el-upload>
        </template>
        <template v-slot:table>
          <el-table-column label="ID">
              <template slot-scope="scope">
              <router-link :to="$route.path + scope.row.id">
                {{ scope.row.id }}
              </router-link>
            </template>
          </el-table-column>
          <el-table-column :label="$t('file_name')" prop="file_name">
          </el-table-column>
          <el-table-column :label="$t('system.status')" prop="status">
          </el-table-column>
          <el-table-column :label="$t('start_time')" prop="start_time">
          </el-table-column>
          <el-table-column :label="$t('action')">
            <template slot-scope="scope">
              <el-button
                @click.native.prevent="handleCheck(scope.row)"
                type="text"
                size="medium"
              >
                {{ $t("configure.check") }}
              </el-button>
            </template>
          </el-table-column>
        </template>
      </ky-table>
    </template>
  </page>
</template>

<script>
import Page from "@/components/Page";
import kyTable from "@/components/KyTable";
import { getBatchList } from "@/api/batch";
export default {
  components: {
    Page,
    kyTable,
  },
  data(){
      return {
          fileList: [],
          search_data: {
              file_name: {
                  name: "file_name",
                  type: "text"
              },
              status: {
                  name: "system.status",
                  type: "select",
                  items: []
              },
              start_time: {
                  name: "start_time",
                  type: "date"
              }
          }
      }
  },
  methods: {
    getBatchList,
    handleCheck(row) {},
    handleSuccess() {
      this.fileList = [];
      this.$message({
        type: "success",
        message: this.$t("file_uploaded_successfully"),
      });
    },
    handleError(){
      this.fileList = [];
      this.$message({
        type: "error",
        message: this.$t("file_uploaded_error"),
      });
    }
  },
};
</script>

<style>
</style>